<template>
  <div>
    <div class="list_box">
      <p class="intro">用户说明</p>
      <div class="user">
        <span v-if="!user.userProfile">什么都没有写</span>
        {{user.userProfile}}
      </div>
    </div>
    <div class="usertel">
      <ul>
        <li>查看信息</li>
        <li class="iconfont"><span>&#xe639;</span>个人主页 : <span :title="user.homepage">{{user.homepage}}</span></li>
        <li class="iconfont"><span>&#xe64a;</span>GitHub :<span :title="user.github">{{user.github}}</span></li>
        <li class="iconfont"><span>&#xe63b;</span>QQ : <span :title="user.qqNum">{{user.qqNum}}</span></li>
        <li class="iconfont"><span>&#xe60d;</span>联系方式 : <span :title="user.contact">{{user.contact}}</span></li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'HomeList',
  computed: {
    ...mapState({
      user: 'myHome'
    })
  },
  methods: {
    tomoveHandel () {
      this.$refs.zhezhao.style.top = event.target.offsetTop + 'px'
    }
  }
}
</script>

<style lang="stylus" scoped>
  .list_box{
    position: relative
    width: 270px
    height: auto
    margin-bottom: .7rem
    margin-top: .4rem
    content: " "
    display: table
    clear: both
    background-color: rgb(255,255,255)
    .intro{
      margin: 0
      padding: .3rem
      font-size: .4rem
      padding-left: .15rem
      border-bottom: 1px solid rgb(210,210,210)
    }
    .user{
      word-wrap:break-word
      width: 100%
      line-height: .45rem
      height: auto
      min-height: 100px
      letter-spacing: 2px
      overflow: hidden
      box-sizing: border-box
      font-size: .32rem
      padding: .1rem
      span{
        color: rgb(150,150,150)
      }
    }
  }
  .usertel{
    position: relative
    width: 270px
    height: auto
    margin-bottom: .7rem
    margin-top: .4rem
    content: " "
    display: table
    clear: both
    background-color: rgb(255,255,255)
    ul{
      list-style: none
      margin: 0
      padding: 0
      width: 100%
      height: 100%
      cursor: default
    }
    li:nth-child(1){
      border-bottom: 1px solid rgb(210,210,210)
      padding: .3rem
      padding-left: .15rem
      font-size: .4rem
    }
    li:nth-child(2){
      position: relative
      padding: .3rem
      padding-left: .15rem
      border-bottom: 1px solid black
      span:nth-child(1){
        text-overflow: ellipsis
        overflow: hidden
        white-space: nowrap
        margin-right: .2rem
      }
      span:nth-child(2){
        text-overflow: ellipsis
        overflow: hidden
        white-space: nowrap
        display: inline-block
        box-sizing: border-box
        position: absolute
        width: 160px
        margin-left: .2rem
      }
    }
    li:nth-child(3){
      padding: .3rem
      border-bottom: 1px solid black
      padding-left: .15rem
      span:nth-child(1){
        margin-right: .2rem
      }
      span:nth-child(2){
        text-overflow: ellipsis
        overflow: hidden
        white-space: nowrap
        display: inline-block
        box-sizing: border-box
        position: absolute
        width: 160px
        margin-left: .2rem
      }
    }
    li:nth-child(4){
      padding: .3rem
      padding-left: .15rem
      border-bottom: 1px solid black
      span:nth-child(1){
        margin-right: .2rem
      }
      span:nth-child(2){
        text-overflow: ellipsis
        overflow: hidden
        white-space: nowrap
        display: inline-block
        box-sizing: border-box
        position: absolute
        width: 160px
        margin-left: .2rem
      }
    }
    li:nth-child(5){
      padding: .3rem
      padding-left: .15rem
      span:nth-child(1){
        margin-right: .2rem
      }
      span:nth-child(2){
        text-overflow: ellipsis
        overflow: hidden
        white-space: nowrap
        display: inline-block
        box-sizing: border-box
        position: absolute
        width: 160px
        margin-left: .2rem
      }
    }
  }
</style>
